<template>
  <div>
    <search></search>
    <div class="category-main">
      <div class="left">
        <van-sidebar v-model="activeKey">
          <van-sidebar-item
            :title="item1.name"
            v-for="item1 in categoryList"
            :key="item1.id"
            @click="showRightData"
          />
        </van-sidebar>
      </div>
      <div class="right">
        <div class="right-img">
          <img
            :src="currentCategory.banner_url"
            alt=""
            width="100%"
            height="140"
          />
          <p class="center-name">{{ currentCategory.front_name }}</p>
        </div>
        <div class="right-title">
          <span class="category-name">{{ currentCategory.name }}</span>
        </div>
        <van-grid :column-num="3">
          <van-grid-item
            v-for="item in currentCategory.subCategoryList"
            :key="item.id"
            :icon="item.wap_banner_url"
            :text="item.name"
            @click="toCategoryList(item.id)"
          />
        </van-grid>
      </div>
    </div>
  </div>
</template>
 
<script>
import { getCategorytData, getCurrentCategoryData } from "@/request/api";
import search from "@/components/home/search.vue";

export default {
  name: "",
  components: {
    search,
  },
  data() {
    return {
      activeKey: 0,
      categoryList: [],
      currentCategory: {},
    };
  },
  methods: {
    //获取分类数据
    fetchCategory() {
      getCategorytData({}).then((res) => {
        if (res.errno == 0) {
          // console.log(res.data);
          let { categoryList } = res.data;

          this.categoryList = categoryList;
          // this.currentCategory = res.data.currentCategory;

          //首次进入页面时默认展开第一项分类右边的数据
          getCurrentCategoryData({
            id: this.categoryList[this.activeKey].id,
          }).then((res) => {
            if (res.errno == 0) {
              // console.log(res.data);
              this.currentCategory = res.data.currentCategory;
            }
          });
        }
      });
    },
    showRightData(index) {
      //点击左侧导航，右边显示相应数据
      //获取当前分类数据
      getCurrentCategoryData({
        id: this.categoryList[index].id,
      }).then((res) => {
        if (res.errno == 0) {
          this.currentCategory = res.data.currentCategory;
        }
      });
    },
    //跳转到产品分类列表
    toCategoryList(id) {
      this.$router.push({
        path: "/categorylist",
        query: {
          id,
        },
      });
    },
  },
  created() {
    this.fetchCategory();
  },
};
</script>
 
<style lang="less" scoped>
.category-main {
  display: flex;
  .left {
    height: calc(100vh - 104px);
  }
  .right {
    background: #fff;
    box-sizing: border-box;
    .right-img {
      position: relative;
      padding: 1px;
      img {
        display: block;
        border-radius: 5px;
      }
      .center-name {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: red;
      }
    }
    .right-title {
      font-size: 0.16rem;
      line-height: 0.3rem;
      height: 0.3rem;
      display: flex;
      text-align: center;
      position: relative;
      .category-name {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: #fff;
        padding: 0 0.2rem;
      }
      &::before {
        content: "";
        // display: block;
        width: 50%;
        border: 1px solid #ccc;
        margin: auto;
      }
    }
  }
}
</style>